<template>
  <h1>hello world!!!</h1>
  <p v-text="name"></p>
  <!-- v-text的简写 -->
  <p>{{ name }}</p>
  <!-- v-html -->
  <p>{{ info }}</p>
  <p v-html="info"></p>
  <!-- v-bind:属性名=“变量名”绑定动态标签属性 -->
  <p v-bind:data="dataVal">我有属性data</p>
  <!-- class绑定类,简写可以将v-bind去掉-->
  <p v-bind:class="{ 'red': dataVal == 300 ? false : true }">我是绑定了red这个类</p>
  <!-- 判断语句v-if ，当为false时v-if直接消失，而show还是存在的，只是隐藏了-->
  <!-- v-show -->
  <p v-if="isTure">我是if存在</p>
  <p v-if="!isTure">我是if不存在</p>
  <p v-show="isTure">我是show展示</p>
  <p v-show="!isTure">我是show不展示</p>

  <!-- for循环 -->
  <ol>
    <li v-for="(item,index) in userList" :key="index">
      学生姓名：{{ item.username }}
      学生年龄：{{ item.userage }}
    </li>
  </ol>
</template>

<script>
import { reactive, toRefs } from "vue"
export default {
  name: "home",
  setup() {
    //setup()等同于beforeCreate和created两个生命周期
    const data = reactive({
      name: "zyh&hym",
      age: 24,
      info: "<i>我是斜体字</i>",
      dataVal: 300,
      isRed: true,
      isTure: true,
      isFalse: false,
      userList: [
        {
          username: "小红",
          userage: 10
        },
        {
          username: "小成",
          userage: 11
        }, 
        {
          username: "小绿",
          userage: 12
        },
        {
          username:"小黄",
          userage:13
        },
        {
          username:"小明",
          userage:14
        }


      ]
    })
    return {
      ...toRefs(data)
    }
  }
}

</script>


<style>
.red {
  color: red;
}
</style>
